<!DOCTYPE HTML>
<html lang="en" class="sidebar-visible no-js">
    <head>
        <!-- Book generated using mdBook -->
        <meta charset="UTF-8">
        <title>pack and publish - Hello wasm-pack!</title>
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="theme-color" content="#ffffff" />

        <link rel="shortcut icon" href="../favicon.png">
        <link rel="stylesheet" href="../css/variables.css">
        <link rel="stylesheet" href="../css/general.css">
        <link rel="stylesheet" href="../css/chrome.css">
        <link rel="stylesheet" href="../css/print.css" media="print">

        <!-- Fonts -->
        <link rel="stylesheet" href="../FontAwesome/css/font-awesome.css">
        <link href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css">
        <link href="https://fonts.googleapis.com/css?family=Source+Code+Pro:500" rel="stylesheet" type="text/css">

        <!-- Highlight.js Stylesheets -->
        <link rel="stylesheet" href="../highlight.css">
        <link rel="stylesheet" href="../tomorrow-night.css">
        <link rel="stylesheet" href="../ayu-highlight.css">

        <!-- Custom theme stylesheets -->
        

        
    </head>
    <body class="light">
        <!-- Provide site root to javascript -->
        <script type="text/javascript">
            var path_to_root = "../";
            var default_theme = "light";
        </script>

        <!-- Work around some values being stored in localStorage wrapped in quotes -->
        <script type="text/javascript">
            try {
                var theme = localStorage.getItem('mdbook-theme');
                var sidebar = localStorage.getItem('mdbook-sidebar');

                if (theme.startsWith('"') && theme.endsWith('"')) {
                    localStorage.setItem('mdbook-theme', theme.slice(1, theme.length - 1));
                }

                if (sidebar.startsWith('"') && sidebar.endsWith('"')) {
                    localStorage.setItem('mdbook-sidebar', sidebar.slice(1, sidebar.length - 1));
                }
            } catch (e) { }
        </script>

        <!-- Set the theme before any content is loaded, prevents flash -->
        <script type="text/javascript">
            var theme;
            try { theme = localStorage.getItem('mdbook-theme'); } catch(e) { } 
            if (theme === null || theme === undefined) { theme = default_theme; }
            document.body.className = theme;
            document.querySelector('html').className = theme + ' js';
        </script>

        <!-- Hide / unhide sidebar before it is displayed -->
        <script type="text/javascript">
            var html = document.querySelector('html');
            var sidebar = 'hidden';
            if (document.body.clientWidth >= 1080) {
                try { sidebar = localStorage.getItem('mdbook-sidebar'); } catch(e) { }
                sidebar = sidebar || 'visible';
            }
            html.classList.remove('sidebar-visible');
            html.classList.add("sidebar-" + sidebar);
        </script>

        <nav id="sidebar" class="sidebar" aria-label="Table of contents">
            <ol class="chapter"><li><a href="../introduction.html"><strong aria-hidden="true">1.</strong> Introduction</a></li><li><a href="../quickstart.html"><strong aria-hidden="true">2.</strong> Quickstart</a></li><li><a href="../prerequisites/index.html"><strong aria-hidden="true">3.</strong> Prerequisites</a></li><li><ol class="section"><li><a href="../prerequisites/npm.html"><strong aria-hidden="true">3.1.</strong> npm (optional)</a></li><li><a href="../prerequisites/considerations.html"><strong aria-hidden="true">3.2.</strong> considerations</a></li><li><a href="../prerequisites/non-rustup-setups.html"><strong aria-hidden="true">3.3.</strong> Non-rustup setups</a></li></ol></li><li><a href="../commands/index.html"><strong aria-hidden="true">4.</strong> Commands</a></li><li><ol class="section"><li><a href="../commands/new.html"><strong aria-hidden="true">4.1.</strong> new</a></li><li><a href="../commands/build.html"><strong aria-hidden="true">4.2.</strong> build</a></li><li><a href="../commands/test.html"><strong aria-hidden="true">4.3.</strong> test</a></li><li><a href="../commands/pack-and-publish.html" class="active"><strong aria-hidden="true">4.4.</strong> pack and publish</a></li><li><a href="../commands/init.html"><strong aria-hidden="true">4.5.</strong> init (DEPRECATED)</a></li></ol></li><li><a href="../tutorials/index.html"><strong aria-hidden="true">5.</strong> Tutorials</a></li><li><ol class="section"><li><a href="../tutorials/hybrid-applications-with-webpack/index.html"><strong aria-hidden="true">5.1.</strong> Hybrid applications with Webpack</a></li><li><ol class="section"><li><a href="../tutorials/hybrid-applications-with-webpack/getting-started.html"><strong aria-hidden="true">5.1.1.</strong> Getting started</a></li><li><a href="../tutorials/hybrid-applications-with-webpack/using-your-library.html"><strong aria-hidden="true">5.1.2.</strong> Using your library</a></li></ol></li><li><a href="../tutorials/npm-browser-packages/index.html"><strong aria-hidden="true">5.2.</strong> npm browser packages</a></li><li><ol class="section"><li><a href="../tutorials/npm-browser-packages/getting-started.html"><strong aria-hidden="true">5.2.1.</strong> Getting started</a></li><li><ol class="section"><li><a href="../tutorials/npm-browser-packages/getting-started/manual-setup.html"><strong aria-hidden="true">5.2.1.1.</strong> Manual Setup</a></li></ol></li><li><a href="../tutorials/npm-browser-packages/template-deep-dive/index.html"><strong aria-hidden="true">5.2.2.</strong> Template deep dive</a></li><li><ol class="section"><li><a href="../tutorials/npm-browser-packages/template-deep-dive/cargo-toml.html"><strong aria-hidden="true">5.2.2.1.</strong> Cargo.toml</a></li><li><a href="../tutorials/npm-browser-packages/template-deep-dive/src-lib-rs.html"><strong aria-hidden="true">5.2.2.2.</strong> src/lib.rs</a></li><li><a href="../tutorials/npm-browser-packages/template-deep-dive/src-utils-rs.html"><strong aria-hidden="true">5.2.2.3.</strong> src/utils.rs</a></li><li><a href="../tutorials/npm-browser-packages/template-deep-dive/wee_alloc.html"><strong aria-hidden="true">5.2.2.4.</strong> wee_alloc</a></li><li><a href="../tutorials/npm-browser-packages/template-deep-dive/tests-web-rs.html"><strong aria-hidden="true">5.2.2.5.</strong> tests/web.rs</a></li></ol></li><li><a href="../tutorials/npm-browser-packages/building-your-project.html"><strong aria-hidden="true">5.2.3.</strong> Building your project</a></li><li><a href="../tutorials/npm-browser-packages/testing-your-project.html"><strong aria-hidden="true">5.2.4.</strong> Testing your project</a></li><li><a href="../tutorials/npm-browser-packages/packaging-and-publishing.html"><strong aria-hidden="true">5.2.5.</strong> Packaging and publishing</a></li><li><a href="../tutorials/npm-browser-packages/using-your-library.html"><strong aria-hidden="true">5.2.6.</strong> Using your library</a></li></ol></li></ol></li><li><a href="../cargo-toml-configuration.html"><strong aria-hidden="true">6.</strong> Cargo.toml Configuration</a></li><li><a href="../contributing.html"><strong aria-hidden="true">7.</strong> Contributing</a></li></ol>
        </nav>

        <div id="page-wrapper" class="page-wrapper">

            <div class="page">
                <style>
  header.warning {
    background-color: rgb(242, 222, 222);
    border-bottom-color: rgb(238, 211, 215);
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border-bottom-style: solid;
    border-bottom-width: 0.666667px;
    border-image-outset: 0 0 0 0;
    border-image-repeat: stretch stretch;
    border-image-slice: 100% 100% 100% 100%;
    border-image-source: none;
    border-image-width: 1 1 1 1;
    border-left-color: rgb(238, 211, 215);
    border-left-style: solid;
    border-left-width: 0.666667px;
    border-right-color: rgb(238, 211, 215);
    border-right-style: solid;
    border-right-width: 0.666667px;
    border-top-color: rgb(238, 211, 215);
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-top-style: solid;
    border-top-width: 0.666667px;
    color: rgb(185, 74, 72);
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 30px;
    padding-bottom: 8px;
    padding-left: 14px;
    padding-right: 35px;
    padding-top: 8px;
    text-align: center;
  }
</style>
<header class='warning'>
  This documentation is
  <a
  href="https://blog.rust-lang.org/inside-rust/2025/07/21/sunsetting-the-rustwasm-github-org/">no
  longer maintained at this domain</a>, and is now maintained
  <a href="https://drager.github.io/wasm-pack/">
  at drager.github.io/wasm-pack</a> instead.
</header>

                <div id="menu-bar" class="menu-bar">
                    <div id="menu-bar-sticky-container">
                        <div class="left-buttons">
                            <button id="sidebar-toggle" class="icon-button" type="button" title="Toggle Table of Contents" aria-label="Toggle Table of Contents" aria-controls="sidebar">
                                <i class="fa fa-bars"></i>
                            </button>
                            <button id="theme-toggle" class="icon-button" type="button" title="Change theme" aria-label="Change theme" aria-haspopup="true" aria-expanded="false" aria-controls="theme-list">
                                <i class="fa fa-paint-brush"></i>
                            </button>
                            <ul id="theme-list" class="theme-popup" aria-label="Themes" role="menu">
                                <li role="none"><button role="menuitem" class="theme" id="light">Light (default)</button></li>
                                <li role="none"><button role="menuitem" class="theme" id="rust">Rust</button></li>
                                <li role="none"><button role="menuitem" class="theme" id="coal">Coal</button></li>
                                <li role="none"><button role="menuitem" class="theme" id="navy">Navy</button></li>
                                <li role="none"><button role="menuitem" class="theme" id="ayu">Ayu</button></li>
                            </ul>
                            
                        </div>

                        <h1 class="menu-title">Hello wasm-pack!</h1> 

                        <div class="right-buttons">
                            <a href="../print.html" title="Print this book" aria-label="Print this book">
                                <i id="print-button" class="fa fa-print"></i>
                            </a>
                            
                        </div>
                    </div>
                </div>

                

                <!-- Apply ARIA attributes after the sidebar and the sidebar toggle button are added to the DOM -->
                <script type="text/javascript">
                    document.getElementById('sidebar-toggle').setAttribute('aria-expanded', sidebar === 'visible');
                    document.getElementById('sidebar').setAttribute('aria-hidden', sidebar !== 'visible');
                    Array.from(document.querySelectorAll('#sidebar a')).forEach(function(link) {
                        link.setAttribute('tabIndex', sidebar === 'visible' ? 0 : -1);
                    });
                </script>

                <div id="content" class="content">
                    <main>
                        <a class="header" href="#pack-and-publish" id="pack-and-publish"><h1>pack and publish</h1></a>
<p>The <code>publish</code> and <code>pack</code> commands interact with the pkg directory that's
created when you run <code>wasm-pack build</code>. The <code>pack</code> command creates a tarball
from the pkg directory and the <code>publish</code> command creates a tarball from the
pkg directory <strong>and</strong> publishes it to the NPM registry.</p>
<p>Underneath, these commands use <code>npm pack</code> and <code>npm publish</code>. You can read
more about these in the NPM documentation:</p>
<ul>
<li><a href="https://docs.npmjs.com/cli/pack"><code>npm pack</code></a></li>
<li><a href="https://docs.npmjs.com/cli/publish"><code>npm publish</code></a></li>
</ul>
<p>Both these commands take the path to the pkg directory as the first argument.
You can either set the argument directly to the pkg directory or to the parent
of the pkg directory:</p>
<pre><code>$ wasm-pack pack myproject/pkg
| 🎒  packed up your package!
$ wasm-pack pack myproject
| 🎒  packed up your package!
</code></pre>
<p>If you try to call <code>pack</code> or <code>publish</code> on another directory, you get an error:</p>
<pre><code>$ wasm-pack pack myproject/src/
Unable to find the pkg directory at path 'myproject/src/', or in a child directory of 'myproject/src/'
</code></pre>
<p>If you don't set a path, they use the current directory as the path.</p>
<a class="header" href="#publishing-tagged-releases" id="publishing-tagged-releases"><h2>Publishing tagged releases</h2></a>
<p>You can also publish tagged releases with the optional <code>--tag</code> argument, e.g.</p>
<pre><code>wasm-pack publish --tag next
</code></pre>
<p>By default, the <code>latest</code> tag is used to identify the current version of a package,
and npm install &lt;pkg&gt; (without any @&lt;version&gt; or @&lt;tag&gt; specifier) installs the latest tag.</p>
<p>You can read more about <a href="https://docs.npmjs.com/cli/dist-tag">distribution tags</a> on NPM.</p>

                    </main>

                    <nav class="nav-wrapper" aria-label="Page navigation">
                        <!-- Mobile navigation buttons -->
                        
                            <a rel="prev" href="../commands/test.html" class="mobile-nav-chapters previous" title="Previous chapter" aria-label="Previous chapter" aria-keyshortcuts="Left">
                                <i class="fa fa-angle-left"></i>
                            </a>
                        

                        
                            <a rel="next" href="../commands/init.html" class="mobile-nav-chapters next" title="Next chapter" aria-label="Next chapter" aria-keyshortcuts="Right">
                                <i class="fa fa-angle-right"></i>
                            </a>
                        

                        <div style="clear: both"></div>
                    </nav>
                </div>
            </div>

            <nav class="nav-wide-wrapper" aria-label="Page navigation">
                
                    <a href="../commands/test.html" class="nav-chapters previous" title="Previous chapter" aria-label="Previous chapter" aria-keyshortcuts="Left">
                        <i class="fa fa-angle-left"></i>
                    </a>
                

                
                    <a href="../commands/init.html" class="nav-chapters next" title="Next chapter" aria-label="Next chapter" aria-keyshortcuts="Right">
                        <i class="fa fa-angle-right"></i>
                    </a>
                
            </nav>

        </div>

        

        

        

        

        <script src="../clipboard.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="../highlight.js" type="text/javascript" charset="utf-8"></script>
        <script src="../book.js" type="text/javascript" charset="utf-8"></script>

        <!-- Custom JS scripts -->
        

        

    </body>
</html>
